<template>
  <div class="wrapper_department">
    <div>
   <overView v-if="roleNames && roleNames.includes('部门主管')||roleNames.includes('项目经理')||roleNames.includes('项目成员')||roleNames.includes('财务人员')||roleNames.includes('公司领导')"  :dataSource="dataSource" :overviewDataSource="overviewDataSource" />

    <hrDepartment  v-if="roleNames && roleNames.includes('行政人员')"  :hrListOne="hrListOne" :hrListTwo="hrListTwo" />

    <customerTable v-if="roleNames && roleNames.includes('项目经理')||roleNames.includes('项目成员')" :tableData="newyAssignedVOList" :isPercent="false" customerText="立即分配" @enterDetail="fenPeiFn" @enterDetail2="proGaiKuanFn"   :btn-edit="false" :columns="column3"
    title="新指派我的"
    :count="newyAssignedVOList == null ? 0 :newyAssignedVOList.length"
    >

    </customerTable>

    <customerTable v-if="roleNames && roleNames.includes('部门主管')||roleNames.includes('项目经理')||roleNames.includes('项目成员')||roleNames.includes('财务人员')||roleNames.includes('公司领导')"  :tableData="participatedInInfoVOList" :columns="column2" title="项目概况" @distribution="distribution" @finishPro="finishPro" @enterDetail="proGaiKuanFn" :btn-change="roleNames.includes('项目经理')?true:false"  :btnEdit="roleNames.includes('部门主管')?true:false"                                          />

    <customerTable v-if="roleNames && roleNames.includes('行政人员') || roleNames.includes('财务人员') || roleNames.includes('公司领导')" :tableData="manpowerUtilizationVO" :isPercent="false" :columns="column4"  :customerRender="false" :title="titleStr" />
      <div v-if="(roleNames && roleNames.includes('行政人员') || roleNames.includes('财务人员') || roleNames.includes('公司领导')) && this.page.pageTotal !=0" style="text-align:right;">
          <el-pagination
                  background
                  layout="prev, pager, next"
                  :page-size="page.pageSize"
                  @current-change="changePageCurrent"
                  :total="page.pageTotal">
          </el-pagination>
      </div>
    </div>

    <peopleSpend v-if="roleNames && roleNames.includes('部门主管')||roleNames.includes('项目经理')||roleNames.includes('公司领导')" :isPieShow="true" :data="peopleSpendData" :dataName="peopleSpendDataName" :peopleSpendDataNamePro="peopleSpendDataNamePro" :peopleSpendDataPro="peopleSpendDataPro" :peopleSpendPie="peopleSpendPie" />

    <mySpend v-if="roleNames && roleNames.includes('项目成员')" :data="myPowerExpendVOListValue" :dataName="myPowerExpendVOListName"  :myMandyProgressVOList="myMandyProgressVOList" ></mySpend>

    <customerTable v-if="roleNames && roleNames.includes('部门主管') ||roleNames.includes('项目经理')" class="daily" @enterDetail="dailyFn" :width="'49%'" :tableData="dailyReportReivewVO" :columns="column5"  :isPercent="false" title="日报待评审"
    :count="dailyReportReivewVO == null ? 0 : dailyReportReivewVO.length"
     />

  </div>
</template>
<script>
import {
    http_dashboard_home,
    http_status_finish,
    http_manpowerUtilization,
    http_assignment_updateReadType
} from '@/api/dashboard'
    import overView from './components/overView'
    import customerTable from './components/customerTable'
    import peopleSpend from './components/peopleSpend'
    import mySpend from './components/mySpend'
    import hrDepartment from './hrDepartment'
import {
    http_home_indexA,
    http_home_indexB,
    http_home_indexC,
    http_home_indexD,
    http_home_indexE,
    http_home_indexF,
    http_home_indexG,
    http_home_indexH,
    http_home_indexI,
    http_home_indexJ
} from '@/api/home'
    const column = [
        {
            prop: 'name',
            label: '成员'
        },
        {
            prop: 'date',
            label: '所属部门'
        },
        {
            prop: 'date',
            label: '岗位'
        },
        {
            prop: 'date',
            label: '员工性质'
        },
        {
            prop: 'date',
            label: '本月工作日'
        },
        {
            prop: 'date',
            label: '本月计划人天'
        },
        {
            prop: 'date',
            label: '本月打卡人天'
        },
        {
            prop: 'date',
            label: '本月稼动率'
        }
    ]
    const column2 = [
        {
            prop: 'proCode',
            label: '项目编号'
        },
        {
            prop: 'proName',
            label: '项目名称'
        },
         {
            prop: 'deptName',
            label: '归属开发部门'
        },
        {
            prop: 'date',
            label: '项目周期'
        },
        {
            prop: 'proStartWorkDay',
            label: '项目启动时间'
        },
        {
            prop: 'status',
            label: '项目状态'
        }
    ]
    const column3 = [
        {
            prop: 'proCode',
            label: '项目编号'
        },
        {
            prop: 'proName',
            label: '项目名称'
        },
           {
            prop: 'deptName',
            label: '归属开发部门'
        },
        {
            prop: 'period',
            label: '项目周期'
        },
        // {
        //     prop: 'proNode',
        //     label: '项目初始节点'
        // },
        {
            prop: 'proPriorityStr',
            label: '优先级'
        }
    ]
    const column4 = [
        {
            prop: 'userName',
            label: '成员'
        },
        {
            prop: 'deptName',
            label: '所属部门'
        },
        {
            prop: 'position',
            label: '岗位'
        },

        {
            prop: 'employeeType',
            label: '员工性质'
        },
        {
            prop: 'workDate',
            label: '本月工作日'
        },
        {
            prop: 'workPlan',
            label: '本月计划人天'
        },
        {
            prop: 'workPutin',
            label: '本月打卡人天'
        },

        {
            prop: 'utilization',
            label: '本月稼动率'
        },



    ]
    const column5 = [
        {
            prop: 'userName',
            label: '成员'
        },
        {
            prop: 'proName',
            label: '项目名称'
        },
        {
            prop: 'workDate',
            label: '日报日期'
        }
    ]
    export default {
        components: {
            overView,
            customerTable,
            peopleSpend,
            mySpend,
            hrDepartment
        },
        data() {
            return {
                column,
                column2,
                column3,
                column4,
                column5,
                count:null,
                dataSource: [],
                titleStr: '项目人力报表         以下为本月初开始至今天每个员工的稼动情况',
                participatedInInfoVOList:[],
                peopleSpendData:[],
                peopleSpendDataName:[],
                newyAssignedVOList:[],
                manpowerUtilizationVO:[],
                myMandyProgressVOList:[],
                dailyReportReivewVO:[],
                myPowerExpendVOListName:[],
                myPowerExpendVOListValue:[],
                roleNames:'',
                hrListOne:[],
                hrListTwo:[],
                peopleSpendDataPro:[],
                peopleSpendDataNamePro:[],
                overviewDataSource: {},
                peopleSpendPie: [],
                manpowerUtilization: [],
                page:{
                    pageNum: 1,
                    pageSize: 5,
                },
            }
        },
        mounted() {

            const user = localStorage.getItem('user')
            this.init()
            this.http_manpower_utilization()
            this.roleNames = this.$store.state.user.roleNames || (user && JSON.parse(user).roleNames) || ''
            this.$nextTick(() => {
                this.accessControl()
            })

        },
        created() {
            this.http_homeIndexA()
            this.http_homeIndexB()
            this.http_homeIndexC()
            this.http_homeIndexD()
            this.http_homeIndexE()
            this.http_homeIndexF()
            this.http_homeIndexG()
            this.http_homeIndexH()
            this.http_homeIndexI()
            this.http_homeIndexJ()
        },
        methods: {
            init() {
                // this.homeFn()
            },
            http_seeAfter(proId){
                http_assignment_updateReadType(proId).then(result=>{})
            },
            /**
             * 权限控制
             */
            accessControl() {
                if (this.roleNames.includes('项目成员')) {
                    const arr = [
                        {
                            prop: 'assignedPeriod',
                            label: '指派周期'
                        },
                        {
                            prop: 'totalPutin',
                            label: '计划投入人天'
                        }
                    ]
                    this.column3 = [...this.column3, ...arr]
                }
            },
            http_manpower_utilization(){
                http_manpowerUtilization(this.page).then(result=>{
                    const {data} = result
                    this.manpowerUtilizationVO = data.records;
                    this.page={
                        pageNum: data.current,
                        pageSize: data.size,
                        pageTotal: data.total,
                    }
                })


            },
            changePageCurrent(value){
                this.page.pageNum = value
                this.http_manpower_utilization()
            },
            async http_homeIndexA() {
                let result = await http_home_indexA()
                const { success, data } = result
                if (success){
                    this.dataSource = Object.values(data)  // OverviewInfoVO 1
                    this.overviewDataSource = data
                }
            },
            async http_homeIndexB() {
                let result = await http_home_indexB()
                const { success, data } = result
                if (success) {
                    // 项目概况
                    this.participatedInInfoVOList = data  // ParticipatedInInfoVOList 2
                    this.participatedInInfoVOList.forEach((item,index)=>{
                        item.date = item.proStartDay.substring(0,10) +'~' + item.proEndday.substring(0,10)
                        switch (item.status) {
                            case "1":
                                item.status = '未发布'
                                break;
                            case "2":
                                item.status = '审批中'
                                break;
                            case "3":
                                item.status = '进行中'
                                break;
                            case "4":
                                item.status = '已完成'
                                break;
                            case "5":
                                item.status = '已拒绝'
                                break;
                            case "6":
                                item.status = '未启动'
                                break;
                        }
                    })
                }
            },
            async http_homeIndexC() {
                let result = await http_home_indexC()
                const { success, data } = result
                if (success) {
                    // 人力支出统计项目
                    this.peopleSpendPie = data
                    data.forEach((item,index)=>{  // ManPowerExpendByProjectVO 3
                        const peopleSpendDataPro = []
                        const peopleSpendDataNamePro = []
                        peopleSpendDataPro.push(item.value)
                        peopleSpendDataNamePro.push(item.text)
                        this.peopleSpendDataPro = peopleSpendDataPro
                        this.peopleSpendDataNamePro = peopleSpendDataNamePro

                        // this.peopleSpendDataPro.push(item.value)
                        // this.peopleSpendDataNamePro.push(item.text)
                    })
                }
            },
            async http_homeIndexD() {
                let result = await http_home_indexD()
                const { success, data } = result
                if (success) {
                    // 人力支出统计岗位
                    let peopleSpendData = []
                    let peopleSpendDataName = []
                    data.forEach((item, index) => {  // ManpowerExpendByRoleVO 4
                        peopleSpendData.push(item.value)
                        peopleSpendDataName.push(item.text)
                        // this.peopleSpendData.push(item.value)
                        // this.peopleSpendDataName.push(item.text)
                    })
                    this.peopleSpendData = peopleSpendData
                    this.peopleSpendDataName = peopleSpendDataName
                }
            },
            async http_homeIndexE(){
                let result = await http_home_indexE()
                const { success, data } = result
                if (success) {
                    this.dailyReportReivewVO = data  // DailyReportReivewVO 5
                }
            },
            async http_homeIndexF(){
                let result = await http_home_indexF()
                const { success, data } = result
                if (success) {
                    data.forEach((item, index) => {
                        if (item.proPriorityStr == 1) {
                            item.proPriorityStr = '高'
                        } else if (item.proPriorityStr == 2) {
                            item.proPriorityStr = '中'
                        } else {
                            item.proPriorityStr = '低'
                        }
                    })
                    this.newyAssignedVOList = data  // NewyAssignedVOList 6
                }
            },
            async http_homeIndexG() {
                let result = await http_home_indexG()
                const { success, data } = result
                if (success) {
                    // 我的人力支出统计
                    this.myPowerExpendVOListValue = []   //  MyPowerExpendVOList 7
                    this.myPowerExpendVOListName = []
                    data.forEach((item, index) => {
                        this.myPowerExpendVOListValue.push(item.value)
                        this.myPowerExpendVOListName.push(item.text)
                    })
                    this.myPowerExpendVOList = data
                    //   console.log(this.myPowerExpendVOList)
                }
            },
            async http_homeIndexH() {
                let result = await http_home_indexH()
                const { success, data } = result
                if (success) {
                    // 我的人力支出进度
                    data.forEach((item, index) => {   // MyMandyProgressVOList 8
                        if (item.putinDone && item.putinPlan) {
                            // item.num = ((item.putinDone/item.putinPlan)*100).toFixed()*1
                            item.num = item.progress
                        }
                    })
                    this.myMandyProgressVOList = data

                    // console.log( this.myMandyProgressVOList)
                }
            },
            async http_homeIndexI() {
                let result = await http_home_indexI()
                const { success, data } = result
                if (success) {
                    const titles = [
                        {
                            title: '总份数',
                            value: ''
                        },
                        {
                            title: '核验成功',
                            value: ''
                        },
                        {
                            title: '核验异常（考勤、休假等）',
                            value: ''
                        }
                    ]
                    titles[0].value = data.total   // YesterdayReviewVO 9
                    titles[1].value = data.reviewSuccess
                    titles[2].value = data.reviewException
                    this.hrListOne = titles
                }
            },
            async http_homeIndexJ() {
                let result = await http_home_indexJ()
                const { success, data } = result
                if (success) {
                    const today = [
                        {
                            title: '总份数',
                            value: ''
                        },
                        {
                            title: '已提交',
                            value: ''
                        },
                        {
                            title: '未提交',
                            value: ''
                        }
                    ]
                    today[0].value = data.total  // TodayReportSubmitTO  10
                    today[1].value = data.submit
                    today[2].value = data.notSubmit
                    this.hrListTwo = today
                }
            },
            homeFn() {
                http_dashboard_home({}).then((res)=>{
                    if(res.success){
                        // 项目总览
                        // console.log(  Object.values(res.data.overviewInfoVO))
                        this.dataSource = Object.values(res.data.overviewInfoVO)  // OverviewInfoVO 1
                        this.overviewDataSource = res.data.overviewInfoVO
                        this.peopleSpendPie = res.data.manPowerExpendByProjectVO
                        this.manpowerUtilization = res.data.manpowerUtilization || []
                        // 项目概况
                        this.participatedInInfoVOList = res.data.participatedInInfoVOList  // ParticipatedInInfoVOList 2
                        this.participatedInInfoVOList.forEach((item,index)=>{
                            item.date = item.proStartDay.substring(0,10) +'~' + item.proEndday.substring(0,10)
                            switch (item.status) {
                                case "1":
                                    item.status = '未发布'
                                    break;
                                case "2":
                                    item.status = '审批中'
                                    break;
                                case "3":
                                    item.status = '进行中'
                                    break;
                                case "4":
                                    item.status = '已完成'
                                    break;
                                case "5":
                                    item.status = '已拒绝'
                                    break;
                                case "6":
                                    item.status = '未启动'
                                    break;
                            }
                        })
                        // 人力支出统计岗位
                        let peopleSpendData = []
                        let peopleSpendDataName = []
                        res.data.manpowerExpendByRoleVO.forEach((item,index)=>{  // ManpowerExpendByRoleVO 4
                            peopleSpendData.push(item.value)
                            peopleSpendDataName.push(item.text)
                            // this.peopleSpendData.push(item.value)
                            // this.peopleSpendDataName.push(item.text)
                        })
                        this.peopleSpendData = peopleSpendData
                        this.peopleSpendDataName = peopleSpendDataName

                        // 人力支出统计项目
                        res.data.manPowerExpendByProjectVO.forEach((item,index)=>{  // ManPowerExpendByProjectVO 3
                            const peopleSpendDataPro = []
                            const peopleSpendDataNamePro = []
                            peopleSpendDataPro.push(item.value)
                            peopleSpendDataNamePro.push(item.text)
                            this.peopleSpendDataPro = peopleSpendDataPro
                            this.peopleSpendDataNamePro = peopleSpendDataNamePro

                            // this.peopleSpendDataPro.push(item.value)
                            // this.peopleSpendDataNamePro.push(item.text)
                        })
                        res.data.newyAssignedVOList.forEach((item,index)=>{
                            if(item.proPriorityStr == 1){
                                item.proPriorityStr= '高'
                            }else if(item.proPriorityStr == 2){
                                item.proPriorityStr= '中'
                            }else{
                                item.proPriorityStr = '低'
                            }
                        })
                        this.newyAssignedVOList = res.data.newyAssignedVOList  // NewyAssignedVOList 6
                        // console.log(this.newyAssignedVOList)
                        // this.manpowerUtilizationVO = res.data.manpowerUtilizationVO || []
                        // this.manpowerUtilizationVO.forEach((item,index)=>{
                        //     item.utilization+='%'
                        // })

                        // 我的人力支出进度
                        res.data.myMandyProgressVOList.forEach((item,index)=>{   // MyMandyProgressVOList 8
                            if(item.putinDone && item.putinPlan){
                                // item.num = ((item.putinDone/item.putinPlan)*100).toFixed()*1
                                item.num = item.progress
                            }
                        })
                        this.myMandyProgressVOList = res.data.myMandyProgressVOList

                        // console.log( this.myMandyProgressVOList)
                        // 我的人力支出统计
                        this.myPowerExpendVOListValue = []   //  MyPowerExpendVOList 7
                        this.myPowerExpendVOListName = []
                        res.data.myPowerExpendVOList.forEach((item,index)=>{
                            this.myPowerExpendVOListValue.push(item.value)
                            this.myPowerExpendVOListName.push(item.text)
                        })
                        this.myPowerExpendVOList = res.data.myPowerExpendVOList
                        //   console.log(this.myPowerExpendVOList)

                        this.dailyReportReivewVO = res.data.dailyReportReivewVO  // DailyReportReivewVO 5
                        const titles = [
                            {
                                title: '总份数',
                                value:''
                            },
                            {
                                title: '核验成功',
                                value:''
                            },
                            {
                                title: '核验异常（考勤、休假等）',
                                value:''
                            }
                        ]
                        titles[0].value = res.data.yesterdayReviewVO.total   // YesterdayReviewVO 9
                        titles[1].value = res.data.yesterdayReviewVO.reviewSuccess
                        titles[2].value = res.data.yesterdayReviewVO.reviewException
                        this.hrListOne = titles


                    }
                })
            },


            fenPeiFn(item){
                this.$router.push({path:'/projectEnd?id='+item.proId+'&&from=home'})
            },
            proGaiKuanFn(item,val){
                if(val == 'btnEdit'){
                    this.$router.push({path:'/createProject/'+item.proId})
                }else if(val == 'btnDetail'){
                    this.$router.push({path:'/distributionProject?id='+item.proId + `&proNo=${item.proCode}`})
                    this.http_seeAfter(item.proId)
                }else{
                    // 跳转变更
                    this.$router.push({
                        path: '/change',
                        query: {
                            id: item.proId
                        }
                    })
                }

            },
            dailyFn(item,val){
                // console.log(JSON.stringify(item))
                this.$router.push({path: '/logReview/'+item.proNo+'/'+item.workDate})
            },
            async finishPro(id) {
                const params = {
                    id
                }
                const res = await http_status_finish(params)
                if (res.stateCode && res.stateCode === '0000') {
                    this.homeFn()
                }
            },
            // 再分配
            distribution(item) {
                this.$router.push({
                    path: '/projectEnd',
                    query: {
                        id: item.proId,
                        from: 'home'
                    }
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
  .wrapper {
    &_department {
      min-height: calc(100vh - 110px);
      display: flex;
      flex-direction: column;
      .el-pagination{
        white-space: nowrap;
        padding:22px 0;
        border:1px solid #fff;
        color: rgba(0,0,0,0.65);
        font-weight: 700;
        background: #fff;
    }
    ::v-deep {
        .btn-prev{
            margin: 0 5px;
            background-color: transparent !important;
            color:rgba(0,0,0,0.65) !important;
            border: 1px solid #c7c6c6;
            min-width: 30px;
            border-radius: 2px;
        }
        .btn-next{
            margin: 0 5px;
            background-color: transparent !important;
            color:rgba(0,0,0,0.65) !important;
            border: 1px solid #c7c6c6;
            min-width: 30px;
            border-radius: 2px;
        }
        .el-pagination.is-background .el-pager li:not(.disabled) {
        background-color: transparent !important;
        color:rgba(0,0,0,0.65) !important;
        border: 1px solid #c7c6c6;
    // color: #fff;
    }
    // .el-pagination li{
    //     background-color: transparent !important;  // 进行修改未选中背景和字体
    //     color:rgba(0,0,0,0.65) !important;
    //     border: 1px solid #c7c6c6;
    //     // color: #fff;
    // }
     .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color:  #1890FF !important;   // 进行修改选中项背景和字体
        border: 1px solid #1890FF;
        color: white!important;
    }
}



  }
  }

</style>
